<template>
  <div class="random_mode_content">
    <div class="random_mode_content_top_content">
      <div>
        <span @click="to_functionPage">首页 </span> / <span @click="mode_exit">训练模式 </span> / <span> 随机位置测验 </span>
      </div>
      <div>随机位置测验</div>
      <div></div>
    </div>
      <!-- <div class="mode_exit" @click="mode_exit"> -->
        <!-- <i class="icon-tuichu iconfont"></i> -->
         <!-- <span>首页/</span><span>训练模式/</span><span>随机位置测验</span> -->
      <!-- </div> -->
    
<!--    地图区域-->
    <div class="random_left_map">
      <random_mode_map :map_data="topic_now"></random_mode_map>
    </div>

<!--    操作区域-->
    <div class="random_right_info">
      <div class="random_user_interface">
        <div class="random_user_interface_title">
          <strong>作答区域</strong>
        </div>
        <div class="random_user_interface_topic">
          <strong>如左图所示，请回答出图中高亮区域的行政规划名称？（填入输入框中并点击提交判断，仅填写乡镇街道名，如中枢街道）</strong>
        </div>
        <div class="random_user_interface_answer">
          <div class="random_user_interface_answer_title">当前高亮区域的行政规划名称为：</div>
          <div class="random_user_interface_answer_input">
            <input type="text" v-model="user_input" id="user_input_text" placeholder="如：中枢街道">
<!--            <div>请输入内容</div>-->
          </div>
          <div class="random_user_interface_answer_submit">
            <div class="random_user_interface_answer_submit_button" @click="submit">提交判断</div>
            <div class="random_user_interface_answer_submit_nextbutton" @click="next_topic">下一题</div>
          </div>
        </div>
        <div class="random_user_interface_status">
          <div class="random_user_interface_status_answerstatus">
            <strong>状态:</strong>
            <span id="answer_status">{{answer_status}}</span>
          </div>
          <div class="random_user_interface_status_answer_analysis">
            <strong>解析:</strong>当前高亮区域为：<span>{{answer_analysis.height_light}}</span> (隶属{{answer_analysis.belongTo}})
          </div>
        </div>
      </div>
      <div class="random_training_records">
        <div class="random_training_records_title">训练记录</div>
        <div class="random_training_records_content">
          <div class="random_training_records_content_list" v-for="(item,index) in records" :key="index">
            {{index+1}}.高亮区域为曲靖市{{item.belongTo}}{{item.answer}}，用户输入为{{item.user_input}}，{{item.status}}
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import random_mode_map from "@/components/FunctionModulePage/TrainModel/training_mode_select/random_mode/random_mode_map";

export default {
  name: "random_mode",
  data(){
    return{
      timer:null,  //提醒定时器
      list:10,
      topic_list:null,   //题库
      topic_now:null,   //当前题目
      topic_index:1,  //当前题目题目索引
      user_input:'',//用户输入
      answer_status:' ？', // 作答状态
      answer_analysis:{
        height_light:'？',
        belongTo:'？'
      },
      records:[],  //作答记录
    }
  },
  components:{
    random_mode_map
  },
  computed:{

  },
  watch:{

  },
  created() {
    this.get_topic_list()
  },
  mounted() {

  },
  methods:{
    //去首页
    to_functionPage(){
      this.$store.commit('setexit_sure_status',true)
    },
    //模式退出
    mode_exit(){
      this.$store.commit('set_mode_exit_status',false)
      this.$router.replace('/train').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },
    //下一题
    next_topic(){
      this.user_input = ''
      //循环题库
      if(this.topic_index >= this.topic_list.length-1){
        this.topic_index = 1
      }
      this.topic_index++
      this.get_topic()
    },
    //提交逻辑
    submit(){
      if(this.user_input === null || this.user_input === ''){
          document.getElementById('answer_status').style.color = 'red'
          this.answer_status = '请输入内容'
          this.timer = setTimeout(()=>{
            document.getElementById('answer_status').style.color = '#cc0dee'
            this.answer_status = '？'
          },1000)
      }else{
        //验证
        let status = null
        if(this.user_input === this.topic_now.height_light){
          document.getElementById('answer_status').style.color = '#e89d05'
          this.answer_status = '回答正确'
          this.answer_analysis.height_light = this.topic_now.height_light
          this.answer_analysis.belongTo = this.topic_now.belongTo
          status = '回答正确'
          // this.timer = setTimeout(()=>{
          //   this.user_input = ''
          //   this.answer_status = ' ？'
          //   this.answer_analysis.height_light = ' ？'
          //   this.answer_analysis.belongTo = ' ？'
          // },1000)
        }else{
          document.getElementById('answer_status').style.color = 'red'
          this.answer_status = '回答错误'
          this.answer_analysis.height_light = this.topic_now.height_light
          this.answer_analysis.belongTo = this.topic_now.belongTo
          status = '回答错误'
          // this.timer = setTimeout(()=>{
          //   this.user_input = ''
          //   this.answer_status = '？'
          //   this.answer_analysis.height_light = ' ？'
          //   this.answer_analysis.belongTo = ' ？'
          // },1000)
        }
        //加入作答记录
        this.records.push(
            {
              user_input:this.user_input,
              answer:this.topic_now.height_light,
              belongTo:this.topic_now.belongTo,
              status:status
            }
        )
      }
    },

    //获取父组件传回的题库
    get_topic_list(){
      this.topic_list = this.$store.state.mode_topic_list
      console.log('random页面的题库数据：',this.topic_list)
      //获取题库后首题由页面挂载完成之后显示
      this.get_topic()
    },
    //生成单独题目
    get_topic(){
      this.topic_now = this.topic_list[this.topic_index-1]
      // console.log('random页面的数据：',this.topic_now)
      //同时当前题目将传递给子组件地图，使用props绑定子组件传递
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.mode_exit()
  }
}
</script>

<style scoped>
  .random_mode_content{
    width: 69vw;
    height: 90vh;
    /*background-color: #94e094;*/
  }
  .random_mode_content_top_content{
    width: 69vw;
    height: 10vh;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px dashed black;
    background-color: #565756;
    position: absolute;
    top: 0;
    /*left: 26vw;*/
  }
  .random_mode_content_top_content div{
    width: 33%;
    height: 100%;
    /* margin-right: 1px; */
    /* background-color: #09fab6; */
    float: left;
  }
  .random_mode_content_top_content div:nth-child(2){
    text-align: center;
    line-height: 10vh;
    font-size: 2vw;
    color: white;
    font-weight: bolder;
  }
  .random_mode_content_top_content div:nth-child(1){
    box-sizing: border-box;
    padding-left: 1vw;
    text-align: left;
    line-height: 10vh;
    color: white;
    font-size: 0.6vw;
  }
  .random_mode_content_top_content div:nth-child(1):hover{
    cursor: pointer;
  }
  .random_mode_content_top_content div:nth-child(1) span:hover{
    color: #0aa2e8;
  }
  .mode_exit{
    width: 10vw;
    height: 5vh;
    background-color: red;
    position: relative;
    top: 2.5vh;
    left: 1vw;
    text-align: center;
    float: left;
    font-size: 0.5vw;
  }
  .mode_exit i{
    position: relative;
    top: -3vh;
    font-size: 2vw;
    /*background-color: yellow;*/
  }
  .mode_exit i:hover{
    cursor: pointer;
    color: red;
  }
  .mode_exit i:active{
    cursor: pointer;
    color: green;
    font-size: 2.2vw;
  }
  .random_left_map{
    width: 35vw;
    height: 78vh;
    background-color: #6e7070;
    border-radius: 10px;
    /*float: left;*/
    position: relative;
    top: 12vh;
  }
  .random_right_info{
    width: 33vw;
    height: 78vh;
    /*background-color: #11e34d;*/
    box-sizing: border-box;
    position: relative;
    top: -66vh;
    left: 36vw;
  }
  .random_user_interface{
    width: 33vw;
    height: 30vh;
    background-color: #515251;
    border: 1px dashed black;
    border-radius: 10px;
    overflow: hidden;
    color: #146dd9;
    box-sizing: border-box;
  }
  .random_user_interface_title{
    width: 33vw;
    height: 3vh;
    /*background-color: #09ec49;*/
    text-align: center;
    line-height: 3vh;
    box-sizing: border-box;
    border-bottom: 1px solid black;
    color: #0ae80a;
  }
  .random_user_interface_topic{
    width: 33vw;
    height: 8vh;
    /*background-color: #ecf3f0;*/
    box-sizing: border-box;
    margin-top: 1vh;
    padding: 10px;
    font-size: 1vw;
    overflow: hidden;
    color: #15b6e5;
  }
  .random_user_interface_answer{
    width: 33vw;
    height: 8vh;
    /*background-color: #ecf3f0;*/
    box-sizing: border-box;
    margin-top: 1vh;
    color: #15b6e5;
  }
  .random_user_interface_answer_title{
    width: 15vw;
    height: 8vh;
    /*background-color: #1fc17b;*/
    box-sizing: border-box;
    text-align: right;
    line-height: 8vh;
    font-size: 0.9vw;
  }
  .random_user_interface_answer_input{
    width: 5.5vw;
    height: 8vh;
    /*background-color: #57796b;*/
    box-sizing: border-box;
    position: relative;
    top: -8vh;
    left: 15vw;
  }
  .random_user_interface_answer_input div{
    width: 5vw;
    height: 2.5vh;
    /*background-color: red;*/
    position: relative;
    top: 2.5vh;
    font-size: 0.5vw;
    text-align: center;
    color: red;
    font-weight: bolder;
  }
  .random_user_interface_answer_input input{
    width: 5vw;
    height: 3vh;
    position: relative;
    top: 2.3vh;
    border: none;  /*去除默认边框*/
    outline: none;   /*去除选中时的高亮边框*/
    border: 1px #09fab6 dashed;
    background-color: #b9d2d1;
    color: white;
    box-sizing: border-box;
    color: #cc0dee;
    text-align: center;
    font-size: 0.5vw;
  }
  .random_user_interface_answer_input input:focus{
    border: 1px #079aea dashed;
    background-color: #98ceb9;
  }
  .random_user_interface_answer_submit{
    width: 10vw;
    height: 8vh;
    /*background-color: #24ec9a;*/
    box-sizing: border-box;
    position: relative;
    top: -16vh;
    left: 21vw;
  }
  .random_user_interface_answer_submit_button{
    width: 4vw;
    height: 3vh;
    background-color: #3f4443;
    box-sizing: border-box;
    text-align: center;
    line-height: 3vh;
    position: relative;
    top: 2.5vh;
    border-radius:10px;
    border: 1px #079aea solid;
    overflow: hidden;
    font-size: 0.5vw;
  }
  .random_user_interface_answer_submit_button:hover{
    cursor: pointer;
    background-color: #515152;
    box-sizing: border-box;
    border: 2px #079aea solid;
    box-shadow: 1px 1px 1px 1px #a2c7db;
  }
  .random_user_interface_answer_submit_button:active{
    background-color: #0aec55;
    color: white;
  }
  .random_user_interface_answer_submit_nextbutton{
    width: 4vw;
    height: 3vh;
    background-color: #3f4443;
    box-sizing: border-box;
    text-align: center;
    line-height: 3vh;
    position: relative;
    top: -0.5vh;
    left: 5vw;
    border-radius:10px;
    border: 1px #079aea solid;
    overflow: hidden;
    font-size: 0.5vw;
  }
  .random_user_interface_answer_submit_nextbutton:hover{
    cursor: pointer;
    background-color:#515152;
    box-sizing: border-box;
    border: 2px #079aea solid;
    box-shadow: 1px 1px 1px 1px #a2c7db;
  }
  .random_user_interface_answer_submit_nextbutton:active{
    background-color: #0aec55;
    color: white;
  }

  .random_user_interface_status{
    width: 33vw;
    height: 7vh;
    /*background-color: #ecf3f0;*/
    box-sizing: border-box;
    margin-top: 1vh;
  }
  .random_user_interface_status_answerstatus{
    width: 7vw;
    height: 7vh;
    /*background-color: #3be79d;*/
    box-sizing: border-box;
    text-align: center;
    line-height: 7vh;
    font-size: 0.9vw;
    color: #15b6e5;
  }
  .random_user_interface_status_answerstatus span{
    color: #e7054b;
    font-weight: bolder;
  }
  .random_user_interface_status_answer_analysis{
    width: 25vw;
    height: 7vh;
    /*background-color: #14cbec;*/
    position: relative;
    top: -7vh;
    left: 7vw;
    box-sizing: border-box;
    padding-left: 1vw;
    text-align: left;
    line-height: 7vh;
    font-size: 0.9vw;
    color: #15b6e5;
  }
  .random_user_interface_status_answer_analysis span{
    color: #14e483;
    font-weight: bolder;
  }





  .random_training_records{
    width: 33vw;
    height: 46vh;
    /*background-color: #9ceab2;*/
    background-color: #343436;
    position: relative;
    top: 2vh;
    box-sizing: border-box;
    color: #146dd9;
    border: 1px dashed black;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
  }
  .random_training_records_title{
    width: 33vw;
    height: 3vh;
    /*background-color: #0fe8c7;*/
    background-color: #343436;
    color: #0ae80a;
    text-align: center;
    line-height: 3vh;
    font-weight: bolder;
    box-sizing: border-box;
    border-bottom: 1px solid black;
  }
  .random_training_records_content{
    width: 32vw;
    height: 40vh;
    background-color: #343436;
    line-height: 3vh;
    box-sizing: border-box;
    position: relative;
    top: 1vh;
    left: calc(50% - 16vw);
    overflow-y: scroll;   /* 确保垂直滚动 */
    overflow-x: scroll;   /* 确保水平滚动 */
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .random_training_records_content::-webkit-scrollbar{
    display: none;
  }
  .random_training_records_content_list{
    width: 32vw;
    height: 4vh;
    /*background-color: greenyellow;*/
    margin-top: 0.5vh;
    line-height: 4vh;
    box-sizing: border-box;
    padding-left: 0.5vw;
    /*text-align: center;*/
    /*border-bottom: 1px dashed yellow;*/
  }
</style>